
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import * as Actions from '../../actions'
import Header from '../../components/Header'
import utils from '../../utils'


class Register extends Component{
  static contextTypes={
    router:PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props);
  
    this.state={
      userName : '',
      password    : '',
      code:'',
      isRead:false
    }
  }
  componentDidMount(){
    this.onChangeImg()
  }
  onTextChange(type,e){
    this.setState({
      [type]:e.target.value
    })
  }
  ReadAgreement(){
    this.setState({
      isRead:!this.state.isRead
    })
  }
  onChangeImg(){
    let {actions} = this.props
    actions.getLoginImgCode({func:'get-captcha'})
  }
  //注册
  submit(){
    let {actions,captcha} = this.props
    let {userName,password,code,password2,isRead} =this.state
    if(!isRead){
      utils.msg({text:'Please read the registration agreement first',code:0})
      return
    }
    if(userName.trim() ==''){
      utils.msg({text:'Please enter the account number',code:0})
      return
    }
    if(password.trim().lenght <6){
      utils.msg({text:'password (6+ characters)',code:0})
      return
    }
    if(code.trim().lenght < 5){
      utils.msg({text:'Please enter the picture verification code',code:0})
      return
    }
    // if(password2.trim() !== password.trim()){
    //   msg.info('Confirmation password is not identical.',0)
    //   return
    // }
    
    let data={
      img_otp:code,
      login_name:userName,
      password:utils.encrypt_js(password),
      cookie:captcha.cookie,
      func:'regist'
    }
    actions.login(data,{callback:(res)=>{
        if(res.code ==200){
          localStorage.setItem('userName', res.data.login_name);
          localStorage.setItem('Authorization', res.data.token);
          localStorage.setItem('userId', res.data.user_id)
          this.context.router.history.replace('/home')
        }else{

        }
      }
    })
  }
 
  render(){
    let {userName,password,code,password2,isRead} = this.state
    let {captcha} =this.props
 
    return(
      <div>
        <Header title={'Register'} leftBtn={true} leftBtnTouch={()=>{this.context.router.history.goBack()}}/>
        <div className="login-container common-container">
          <div  className="login-wrap">
            <div className="input-container">
                {/*<div className="txt-username">账号</div>*/}
                <input placeholder="Email (phone for mobile accounts)" className="acc-input" type="text" value={userName} onChange={this.onTextChange.bind(this,'userName')} />
            </div>
            <div className="input-container">
                {/*<div className="txt-password">密码</div>*/}
                <input placeholder="Create a password (6+ characters)" type="password" className="acc-input" value={password} onChange={this.onTextChange.bind(this,'password')} />
            </div>
           {/* <div className="input-container">
                <div className="txt-password">再次输入密码</div>
                <input type="password" className="acc-input" value={password2} onChange={this.onTextChange.bind(this,'password2')}  placeholder="请输入密码" />
                
            </div>*/}
            <div  className="input-container" >
                {/*<div className="txt-imgverify">验证码</div>*/}
                <input placeholder="verification code" className="acc-input imgverify" type="text" value={code} onChange={this.onTextChange.bind(this,'code')} />
                <span className="code-box"><img  className="J_ping" src={captcha.path}/></span>
            </div>
            <div className="clicktxt blue" onClick={this.onChangeImg.bind(this)}>
            Change the image
            </div>
            <div className='btn btn-active loginBtn' onClick={this.submit.bind(this)}>Register</div>
            <div className="subtext-wrap">
              <span className='blue'>Forgot password?</span>
              <span className='blue' onClick={()=>{
                this.context.router.history.push(`/login`);
              }}>Login</span>
            </div>
          </div>
          <div className="quick-login">
            <p className="tip" onClick={this.ReadAgreement.bind(this)}><i className={`iconfont icon-choose ${isRead?'active':''}`}></i>When you Register, you agree to our User Agreement and acknowledge reading our User Privacy Notice.</p>
          </div>
        </div>

      </div>
    )
  }

  

}


function mapStateToProps(state){
  return {
    captcha:state.captcha.toJS()
  }
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(Actions, dispatch)
  }
}
export default  connect(
  mapStateToProps,
  mapDispatchToProps
)(Register)
